<script setup lang="ts" name="GlobalReference">
import { mapState } from 'pinia'
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'
import GlobalReferenceAddEdit from './components/GlobalReferenceAddEdit.vue'
import useMessageBox from '@/hooks/useMessageBox'
import { getGlobalReference, addGlobalReference, editGlobalReference, removeGlobalReference } from '../../utils/globalReference'
import { cloneDeep } from 'lodash-es'

const { messageBox } = useMessageBox()

const emit = defineEmits(['change'])

const props = defineProps({
  type: {
    type: String,
    default: ''
  }
})

const mapStates = computed(() => {
  return mapState(useModelerStore, ['getActive'])
})

const GlobalReferenceAddEditRef = ref(null)
const listRaw = ref([])
const list = ref([])

const editIndex = ref(-1)

const add = () => {
  editIndex.value = -1
  const res = {
    type: props.type,
    text: getTypeText()
  }
  GlobalReferenceAddEditRef.value.showDialog(res)
}

const edit = (row, index) => {
  editIndex.value = index
  const res = {
    type: props.type,
    text: getTypeText(),
    row: row
  }
  GlobalReferenceAddEditRef.value.showDialog(res)
}

const deleteRow = (index) => {
  const msg = '确认<span>删除</span>该' + getTypeText() + '参考项吗？'
  const msgTips = ''
  messageBox('danger', true, msg, msgTips, () => {
    removeGlobalReference(mapStates.value.getActive(), getBpmnType(), listRaw.value[index])
    nextTick(() => {
      initData()
      emit('change')
    })
  })
}

const globalReferenceChange = (v) => {
  if (editIndex.value === -1) {
    addGlobalReference(mapStates.value.getActive(), getBpmnType(), v)
  } else {
    editGlobalReference(mapStates.value.getActive(), getBpmnType(), v, editIndex.value)
  }
  nextTick(() => {
    initData()
    emit('change')
  })
}

const getTypeText = () => {
  if (props.type === 'error') {
    return '错误'
  } else if (props.type === 'message') {
    return '消息'
  } else if (props.type === 'signal') {
    return '信号'
  } else if (props.type === 'escalation') {
    return '上报'
  }
}

const getBpmnType = () => {
  if (props.type === 'error') {
    return 'bpmn:Error'
  } else if (props.type === 'message') {
    return 'bpmn:Message'
  } else if (props.type === 'signal') {
    return 'bpmn:Signal'
  } else if (props.type === 'escalation') {
    return 'bpmn:Escalation'
  }
}

const initData = () => {
  listRaw.value = markRaw(getGlobalReference(mapStates.value.getActive(), getBpmnType()))
  console.log(listRaw.value, '新数据列表')
  list.value = cloneDeep(listRaw.value)
}

onMounted(() => {
  initData()
})
</script>

<template>
  <div class="global-reference">
    <slot />
    <el-table :data="list" border>
      <el-table-column type="index" label="序号" width="55" fixed="left" />
      <el-table-column prop="id" :label="getTypeText() + 'ID'" show-overflow-tooltip min-width="90" />
      <el-table-column prop="name" :label="getTypeText() + '名称'" show-overflow-tooltip min-width="90" />
      <el-table-column v-if="$props.type === 'error'" prop="errorCode" label="错误码" show-overflow-tooltip min-width="70" />
      <el-table-column v-if="$props.type === 'error'" prop="errorMessage" label="错误信息" show-overflow-tooltip min-width="90" />
      <el-table-column prop="operate" label="操作" width="110" align="center" fixed="right">
        <template #default="scope">
          <el-button type="primary" icon="Edit" circle @click="edit(scope.row, scope.$index)"></el-button>
          <el-button type="danger" icon="Delete" circle @click="deleteRow(scope.$index)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button class="add" type="primary" icon="Plus" @click="add">添加{{ getTypeText() }}参考项</el-button>
    <GlobalReferenceAddEdit ref="GlobalReferenceAddEditRef" @save="globalReferenceChange"></GlobalReferenceAddEdit>
  </div>
</template>

<style scoped lang="scss">
.field-content {
  flex: 1;
  padding-right: 6px;
  overflow: hidden;

  .el-button.add {
    width: 100%;
    margin: 12px 0 0;
  }
}
</style>
